<template>
    <div class="container">
        <div class="card-header">
            <div class="header">
                <router-link tag="span" to="/mi">&lt;</router-link>
                <h3>身份验证</h3>
            </div>
        </div>
        <div class="card-main">
            <div class="main">
                <div class="text">您可以上传身份证照片自动识别，或手动填写</div>
                <div class="box" >
                    <img src="../assets/img/xiangji.png" alt="" >
                    <p>上传身份证</p>
                </div>
            </div>
        </div>
        <div class="input">
            <div class="inputs">
                <p>姓名</p>
                <div class="item">
                    <input type="text" placeholder="请输入姓名" v-model="names">
                </div>

            </div>
            <div class="inputs">
                <p>身份证号</p>
                <div class="item">
                    <input type="text" placeholder="请输入身份证号" v-model="cards">
                </div>

            </div>
            <div class="botton">
                <button @click="Card">确认提交</button>
                <p>港、澳、台及海外用户认证入口 ></p>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            names:"",
            cards:"",
        }
    },
    methods:{
        //身份证验证
        Card(){
            // 验证身份证号
            let card = /(^\d{15}$)|(^\d{17}(\d|X|x)$)/;
            //姓名
            let name =/[\u4e00-\u9fa5]/;
            if(!card.test(this.cards)){
                this.$toast("请输入正确的身份证号码");
                return;
            }
            if(!name.test(this.names)){
                this.$toast("请输入正确的姓名");
                return
            }

            console.log("成功");

            window.localStorage.setItem("token","token值");
            window.localStorage.setItem("card","22222");
            this.$toast("验证成功");
            this.$router.push("/mi")
        
        
    },
 
}
}
</script>

<style lang="scss" scoped>
.card-header {
    width: 100%;
    background-color: #fff;

    .header {
        width: 90%;
        height: 55px;
        margin: 0 auto;
        line-height: 55px;

        span {
            float: left;
            font-size: 20px;
            font-weight: 800;
            font-family: "仿宋";
        }

        h3 {
            text-align: center;
            font-weight: 400;
        }
    }
}

.card-main {
    width: 100%;

    .main {
        width: 90%;
        margin: 0 auto;

        .text {
            font-size: 12px;
            text-align: center;
        }

        .box {
            width: 100%;
            height: 188px;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-top: 12px;

            img {
                width: 20px;
                height: 20px;
            }

            p {
                font-size: 12px;
                color: #949494;
            }
        }
    }
}

.input {
    width: 100%;

    .inputs {
        width: 90%;
        margin: 0 auto;
        margin-top: 15px;

        p {
            font-size: 12px;
        }

        .item {
            width: 100%;
            height: 42px;
            border: 1px solid #e9e7e7;

            margin-top: 10px;

            input {
                height: 100%;
                border: none;
                padding-left: 10px;
            }
        }
    }

    .botton {
        width: 90%;

        margin: 0 auto;
        margin-top: 25px;

        button {
            width: 100%;
            height: 44px;
            color: #fff;
            text-align: center;
            line-height: 44px;
            font-size: 14px;
            border: none;
            background-color: #66d699;
            border-radius: 5px;

        }
        p{
            font-size: 12px;
            color: #66d699;
            text-align: center;
            margin-top: 12px;
        }
    }

}
</style>